<template>
  <view class="bottom-button-bar">
    <!-- 左侧按钮 -->
    <view class="bar-item left-item" @click="onLeftClick(0)">
      <view class="iconfont icon-back">
		  <u-icon size="25" name="home"></u-icon>
	  </view>
      <text>首页</text>
    </view>
    <view class="bar-item left-item" @click="onLeftClick(1)">
      <view class="iconfont icon-back">
		  <u-icon size="25" name="grid"></u-icon>
	  </view>
      <text>商城</text>
    </view>
    <!-- 中间突出按钮 -->
    <view class="middle-container">
      <view class="bar-item middle-item" @click="onLeftClick(2)">
        <view class="iconfont icon-add">
			<!-- <u-icon size="25" name="plus-circle"></u-icon> -->
		</view>
        <text>抢单大厅</text>
      </view>
    </view>
    <view class="bar-item left-item" @click="onLeftClick(3)">
	  <view class="iconfont icon-back">
		  <u-icon size="25" name="calendar"></u-icon>
	  </view>
	  <text>培训</text>
	</view>
    <!-- 右侧按钮 -->
    <view class="bar-item right-item" @click="onLeftClick(4)">
      <view class="iconfont icon-me">
		  <u-icon size="25" name="account-fill"></u-icon>
	  </view>
      <text>我的</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "BottomButtonBar",
  methods: {
    // 左侧按钮点击事件
    onLeftClick(i) {
      console.log("左侧按钮点击",i);
	  switch(i){
		  case 0: 
		  uni.navigateTo({
		  	url:'/pages/index/index'
		  })
		   break; 
		  case 1: uni.navigateTo({url:'/pages/shop/shop'})
		   break;
		  case 2: uni.navigateTo({url:'/pages/task/task'})
		   break;
		  case 3: uni.navigateTo({url:'/pages/station/list'}) 
		  break;
		  case 4: uni.navigateTo({url:'/pages/mine/mine'})
		   break;
	  }
      // 可添加自定义逻辑，如返回上一页
      // uni.navigateBack()
    },
    // 中间按钮点击事件
    onMiddleClick() {
      console.log("中间按钮点击");
      // 可添加自定义逻辑，如发布内容
    },
    // 右侧按钮点击事件
    onRightClick() {
      console.log("右侧按钮点击");
      // 可添加自定义逻辑，如跳转到我的页面
      // uni.navigateTo({url: '/pages/mine/mine'})
    }
  }
}
</script>

<style scoped>
/* 底部按钮栏容器 */
.bottom-button-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 0 20rpx;
  box-sizing: border-box;
  z-index: 999;
}

/* 左右按钮样式 */
.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666666;
}

.left-item, .right-item {
  width: 100rpx;
  height: 100rpx;
}

/* 图标样式 */
.iconfont {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}

/* 文字样式 */
.bar-item text {
  font-size: 24rpx;
}

/* 中间按钮容器 - 用于实现突出效果 */
.middle-container {
  height: 100%;
  display: flex;
  align-items: flex-start;
}

/* 中间突出按钮样式 */
.middle-item {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background-color: #488cdc;
  color: #ffffff;
  transform: translateY(-30rpx); /* 向上突出 */
  box-shadow: 0 6rpx 16rpx rgba(255, 87, 34, 0.3); /* 阴影增强突出感 */
}

.middle-item .iconfont {
  font-size: 56rpx;
  margin-bottom: 4rpx;
}

.middle-item text {
  font-size: 26rpx;
  font-weight: 500;
}

/* 解决底部安全区问题（适配iPhone X及以上机型） */
@media (env(safe-area-inset-bottom)) {
  .bottom-button-bar {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(120rpx + env(safe-area-inset-bottom));
  }
}
</style>